
<template>
    <div style="height:43px;position:fixed;left:0;right:0;top:0;z-index:1000;" class="w-full flex items-center justify-center" :class="currentPath === '/home' || currentPath === '/' ? 'bg-[#FFFFFF]' : 'bg-[#212A41]'">
      <div class="container-width flex">
        <div class="flex text-white items-center">
          <img v-if="currentPath === '/home' || currentPath === '/'" src="../assets/logo.png" style="width: 74px;height:18px;" />
          <img v-if="currentPath !== '/home' && currentPath !== '/'" src="../assets/logo_1.png" style="width: 74px;height:18px;" />
        </div>
        <div class="ml-8 flex flex-row items-center" style="font-size:14px;" :class="currentPath === '/home' || currentPath === '/' ? 'text-black' : 'text-white'">
          <router-link to="/home" style="font-size:14px;" class="w-20 flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">首页</router-link>
          <router-link to="/yuanqu/list" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">
            <div class="flex justify-center items-center" style="padding: 0 11px;">
              <img src="../assets/park.png" style="width:15px;height:16px;" />
              <span style="margin-left:6px;font-size: 14px;font-weight: 400;">园区招商</span>
            </div>
          </router-link>
          <router-link to="/project/list" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">
            <div class="flex justify-center items-center" style="padding: 0 11px;">
              <img src="../assets/project.png" style="width:15px;height:15px;" />
              <span style="margin-left:6px;font-size: 14px;font-weight: 400;">项目入驻</span>
            </div>
          </router-link>
          <router-link to="/project/docking" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">
            <div class="flex justify-center items-center" style="padding: 0 11px;">
              <img src="../assets/join.png" style="width:18px;height:18px;" />
              <span style="margin-left:6px;font-size: 14px;font-weight: 400;">园企对接</span>
            </div>
          </router-link>
          <router-link to="/collect" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">
            <div class="flex justify-center items-center" style="padding: 0 11px;">
              <img src="../assets/cuiyuanhui.png" style="width:18px;height:18px;" />
              <span style="margin-left:6px;font-size: 14px;font-weight: 400;">聚园荟</span>
            </div>
          </router-link>
          <router-link to="/news/list" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">
            <div class="flex justify-center items-center" style="padding: 0 11px;">
              <img src="../assets/news.png" style="width:15px;height:17px;" />
              <span style="margin-left:6px;font-size: 14px;font-weight: 400;">信息资讯</span>
            </div>
          </router-link>
        </div>
        <div class="flex flex-row items-center" style="font-size:14px;" :class="currentPath === '/home' || currentPath === '/' ? 'text-black' : 'text-white'">
          <router-link to="/conform" style="" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">
            <div class="flex justify-center items-center" style="padding: 0 5px;">
              <img src="../assets/xuanchuan.png" style="width:15px;height:15px;" />
              <span style="margin-left:6px;font-size: 14px;font-weight: 400;">宣传合作</span>
            </div>
          </router-link>
          <router-link :to="{path:'/home',query:{state:0}}" style="margin-left:19px;" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">
            <div class="flex justify-center items-center" style="padding:6px 9px;background: #FE7743;border-radius: 2px;font-size: 10px;font-weight: 600;color: #FFFFFF;">免费对接</div>
          </router-link>
          <router-link v-if="!isLogin" to="/signin" style="margin-left:19px;" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">登录</router-link>
          <router-link v-if="isLogin" to="/mine/account" style="margin-left:19px;" class="flex justify-center items-center nav-unactive" :class="currentPath === '/home' || currentPath === '/' ? 'nav-unactive-border-FFFFFF' : 'nav-unactive-border-212A41'">我的</router-link>
        </div>
      </div>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth' // get token from cookie

export default {
  props: {
    path:{
      type: String,
      default: '/home',
    }
  },
  data() {
    return {
      currentPath: '',
      isLogin: false
    }
  },
  created() {
    const hasToken = getToken()

    if (hasToken) {
      this.isLogin = true
    } else {

    }
  },
  mounted() {
    this.currentPath = this.$route.path
  }
}
</script>

<style lang="scss">
.nav-unactive {
  height: 43px;
  font-size: 11px;
}
.nav-unactive-border-212A41 {
  border-bottom: solid 4px #212A41;
}
.nav-unactive-border-FFFFFF {
  border-bottom: solid 4px #FFFFFF;
}
.nav-active {
  height: 100%;
  font-size: 11px;
  color: #FE7743;
  border-bottom: solid 4px #FE7743;
}
</style>